<template>
  <div class="business-item-form-configure w-full h-full display-flex-column" style="overflow: hidden">
    <div class="btn-box display-flex" style="justify-content: flex-start">
      <a-button type="primary" class="m-r-sm" @click="handlerCreate">新建</a-button>
      <a-button type="primary m-r-sm" @click="loadData">刷新</a-button>
    </div>
    <div class="w-full" style="height: 10px"></div>
    <div class="table-box flex-1" style="overflow: hidden">
      <a-table
        class="dist-box-table"
        bordered
        :rowClassName="setRowClassName"
        :customRow="customRow"
        :loading="table.loading"
        :rowKey="(record, index)=>index"
        :columns="table.columns"
        :data-source="table.dataSource"
        :pagination="table.pagination"
        :scroll="{ x: false, y: 'calc(100% - 70px)' }"
      >
        <template slot="index" slot-scope="text,record,index">
          <div>{{ index + 1 }}</div>
        </template>
        <span slot="operate" slot-scope="text,record">
          <div class="display-flex">
            <a-button type="default" @click="handlerEditRecord(record)">
              编辑
            </a-button>
            <a-button class="m-l-md" type="danger" @click="handlerRemoveRecord(record)">
              删除
            </a-button>
          </div>
        </span>
      </a-table>
    </div>
  </div>
</template>
<script>
import PageInitFn from '@/api/pageInitFn'
import dataMappingService from '@/api/dataMappingService'

export default {
  name: 'BusinessItemFormConfigure',
  props: {},
  data () {
    return {
      table: {
        columns: [],
        dataSource: [],
        loading: false,
        rowSelection: {
          selectedRowKeys: [],
          selectedRows: [],
          onChange: (selectedRowKeys, selectedRows) => {
            this.table.rowSelection.selectedRowKeys = selectedRowKeys
            this.table.rowSelection.selectedRows = selectedRows
          }
        },
        pagination: {
          pageSize: 20, // 默认每页显示数量
          total: 0,
          current: 1,
          showSizeChanger: true, // 显示可改变每页数量
          pageSizeOptions: ['10', '20', '50', '100', '200', '500'], // 每页数量选项
          showTotal: (total) => `共${total}条数据`, // 显示总数
          onShowSizeChange: (current, pageSize) => {
            this.filter.pageIndex = 1
            this.filter.pageSize = pageSize
            this.table.pagination.pageSize = pageSize
            this.loadData(this.filterText)
          },
          onChange: (current, pageSize) => {
            this.filter.pageIndex = current
            this.filter.pageSize = pageSize
            this.table.pagination.current = current
            this.table.pagination.pageSize = pageSize
            this.loadData(this.filterText)
          }
        }
      },
      filter: {
        pageIndex: 1,
        pageSize: 20
      },
      selectInvSource: '',
      businessTypeList: [],
      selectBusinessType: '',
      selectCategory: ''
    }
  },
  created () {
    this.pageInitFn = new PageInitFn(this)
    this.pageInitFn.created()
  },
  async mounted () {
    this.pageInitFn.mounted()
    this.Event.$on('_REFRESH_TODO_BOX_', this.loadData)
  },
  computed: {},
  methods: {
    handlerCreate () {
      this.handlerEditRecord()
    },
    handlerEditRecord (record) {
      const that = this
      let title = '新建'
      if (record) {
        title = '编辑: ' + record.TEMPLATE_NAME
      }
      const props = {}
      if (record) {
        props.id = Number(record.F_ID)
      }
      this.$dialog({
        title: title,
        content: () => import('./details/dataMapping/DataMappingDetailDialog.vue'),
        width: '700px',
        bodyStyle: { height: '400px', padding: '0' },
        centered: true,
        maskClosable: false,
        okButtonProps: {},
        props: props,
        model: {},
        on: {
          async ok (ctl) {
            const dialogCtl = ctl.getDialogCtl()
            const dataInfo = dialogCtl.getDataInfo()
            const content = dataInfo.content
            if (!content) {
              that.$message.error('请填写JSON模板')
              return
            }
            if (!dataInfo.name) {
              that.$message.error('请填写名称')
              return
            }
            if (!content) {
              that.$message.error('请填写JSON模板')
              return
            }
            if (!dataInfo.scriptId) {
              that.$message.error('请选择js脚本')
              return
            }
            let isError = false
            try {
              JSON.parse(content)
            } catch (e) {
              isError = true
            }
            if (isError) {
              that.$message.error('JSON模版非法,请重新编辑')
              return
            }
            dataInfo.content = JSON.stringify(JSON.parse(content))
            await dataMappingService.saveDataMappingTemplate(dataInfo)
            that.$message.success('修改成功')
            that.loadData()
            ctl.closeDialog()
          }
        }
      })
    },
    handlerRemoveRecord (record) {
      const that = this
      this.$confirm({
        title: '提示',
        content: '确认执行删除操作，删除后项目不可恢复！',
        okText: '确认',
        cancelText: '取消',
        onOk: async () => {
          await dataMappingService.deleteDataMappingTemplateById({ id: record.F_ID })
          that.loadData()
        }
      })
    },
    setRowClassName (record, index) {
      return this.pageInitFn.setRowClassName(record, 'F_ID')
    },
    customRow (record, index, key) {
      // record.key = key
      return this.pageInitFn.customRow(record, 'F_ID')
    },
    async loadData (filterText = null) {
      this.filterText = filterText || null
      await this.pageInitFn.loadData({})
    }
  }
}
</script>

<style scoped lang="less">
.business-item-form-configure {
  background-color: white;
  padding: 10px;
}
</style>
